/**
 * 样衣详情
 */
import * as React from 'react'
import { Card, Form, Steps, Modal, Table, Tabs } from 'antd'
import Authentication from '../../router/Authentication'
import { FormComponentProps } from 'antd/lib/form/Form'
import { PageHeaderLayout, DescriptionList, Description, Zmage } from '../../components'
import '../../assets/style/detail.less'
const Step = Steps.Step
const TabPane = Tabs.TabPane
export interface Props{
  sample: any
  sampleImgs: any
  workStatus: any []
  checkList: any []
  reasonList: any []
  roleScore: any []
  sampleScore: any []
  history: any
  Hxjcfq:any 
}

export interface State {
  shVisible: boolean
  esVisible: boolean
  ysVisible: boolean
  jcVisible:boolean
}


@Authentication
class ApplyDetail extends React.Component<Props & FormComponentProps, State> {

  state = {
    shVisible: false,
    esVisible: false,
    ysVisible: false,
    jcVisible:false
  }
  clickStep = (status: number) => {
    if (status == 2) {
      this.setState({
        ...this.state,
        shVisible: true
      })
    } else if(status == 5) {
      this.setState({
        ...this.state,
        jcVisible: true
      })
    } else if(status == 9) {
      this.setState({
        ...this.state,
        ysVisible: true
      })
    } else if(status == 13) {
      this.setState({
        ...this.state,
        esVisible: true
      })
    }
  }
  render () {
    const { sampleImgs, sample, workStatus, checkList, reasonList, sampleScore, roleScore,Hxjcfq } = this.props
    const getStyle = (status: number): any => {
      let style = {}
      if ([2, 5, 9, 13].indexOf(status) > -1) style = { cursor: "pointer" }
      return style
    }
    const checkColumns = [
      { title: '检查项描述', dataIndex: 'checkinfo', key: 'checkinfo' },
      { title: '说明', dataIndex: 'reason', key: 'reason' }
    ]
    const scoreColumns =  [
      { title: '打分项目', dataIndex: 'scorename', key: 'scorename' },
      { title: '总分值	', dataIndex: 'value', key: 'value' },
      { title: '打分人数	', dataIndex: 'persum', key: 'persum' },
      { title: '平均分	', dataIndex: 'valueavg', key: 'valueavg' }
    ]
    const roleScoreColumns =  [
      { title: '角色名称', dataIndex: 'rolename', key: 'scorename' },
      { title: '分值	', dataIndex: 'VALUE', key: 'value' },
    ]
    const jcColumns =  [
      { title: '总人数', dataIndex: 'usrcnt', key: 'usrcnt' },
      { title: '喜欢', dataIndex: 'addvalue', key: 'addvalue' },
      { title: '不喜欢', dataIndex: 'redvalue', key: 'redvalue' },
      { title: '未操作', dataIndex: 'novalue', key: 'novalue' },
    ]
    const tableFooter = () => {
      const liStyle: any = {
        listStyle: "none",
        width: "25%",
        float: "left",
        textAlign: 'center'
      }
      let totalMd = 0 
      let totalZc = 0
      let totalZxd = 0
      sampleScore.map((row: any) => {
        totalMd+=row.value
        totalZc=row.persum
        totalZxd+=row.valueavg
      }) 
      return (
        <ul style={{padding: "0"}}>
          <li style={{...liStyle, fontWeight: "bold"}}>总计</li>
          <li style={{...liStyle, paddingLeft: "12px"}}>{totalMd}</li>
          <li style={{...liStyle }}>{totalZc}</li>
          <li style={{...liStyle }}>{totalZxd}</li>
        </ul>
      )
    }
    const getImgs = () => {
      let imgs = []
      if(sampleImgs) {
        if(sampleImgs.limg1) imgs.push(sampleImgs.limg1)
        if(sampleImgs.limg2) imgs.push(sampleImgs.limg2)
        if(sampleImgs.limg3) imgs.push(sampleImgs.limg3)
        if(sampleImgs.limg4) imgs.push(sampleImgs.limg4)
        if(sampleImgs.limg5) imgs.push(sampleImgs.limg5)
      }
      return imgs
    }
    return (
      <PageHeaderLayout 
        title = "">
        <Card bordered  title="基本资料">
          <DescriptionList size="large" title="样衣图片" style={{ marginBottom: 32 }}>
            <Description term="" style={{width: "100%"}}>
              {getImgs().map((img: string, index: number) => (
                <Zmage key={index} className="yy-img" src={img} />
              ))}
            </Description>
          </DescriptionList>
          <DescriptionList size="large" title="样衣信息" style={{ marginBottom: 32 }}>
            <Description term="样衣编码">{sample.sampleId}</Description>
            <Description term="波段号">{sample.bandname}</Description>
            <Description term="大类">{sample.dlText}</Description>
            <Description term="小小类">{sample.xlText}</Description>
            <Description term="供应商货号">{sample.pcode}</Description>
            <Description term="合作方式">{sample.jyfs}</Description>
            <Description term="供应商编码">{sample.supplierid}</Description>
            <Description term="供应商名称">{sample.vendername}</Description>
            <Description term="上传时间">{sample.upphototime}</Description>
          </DescriptionList>
        </Card>
        <Card bordered style = {{marginTop: "20px"}} title="样衣申请进度">
          <Steps direction="vertical" size="small" current={workStatus.length}>
              {workStatus.map((item: any, index: number) => (
                <Step 
                  style={getStyle(item.status)} 
                  key={"step" + index.toString()} 
                  title={item.statusname+"("+item.checkdate+")"} 
                  description={item.retstatusname} 
                  onClick= {() => this.clickStep(item.status)}></Step>
              ))}
          </Steps>
        </Card>
        <Modal 
          visible={this.state.shVisible} 
          footer={null}
          title="样衣照片审核情况" 
          width={600} 
          maskClosable={false}
          onCancel={() => this.setState({ shVisible: false })}>
            <Table
              pagination = {false}
              rowKey = "ID"
              columns = {checkColumns}
              dataSource = {checkList} 
            />
        </Modal>
        <Modal 
          visible={this.state.esVisible} 
          footer={null}
          title="样衣二审审核情况" 
          width={600} 
          maskClosable={false}
          onCancel={() => this.setState({ esVisible: false })}>
            <Table
              pagination = {false}
              rowKey = "ID"
              columns = {checkColumns}
              dataSource = {reasonList} 
            />
        </Modal>
        <Modal
      title="海选决策"
      width={600}
      visible={this.state.jcVisible} maskClosable={false} footer={null} onCancel={() => this.setState({ jcVisible: false })}>
        <Table
                pagination = {false}
                rowKey = "sampleid"
                columns = {jcColumns}
                dataSource = {Hxjcfq.scm_sample_choice} 
              />
    </Modal>
        <Modal 
          visible={this.state.ysVisible} 
          footer={null}
          title="一审决策打分情况" 
          width={600} 
          maskClosable={false}
          onCancel={() => this.setState({ ysVisible: false })}>
          <Tabs type="line" size="small" >
            <TabPane tab="得分情况" key="1">
              <Table
                footer={tableFooter}
                pagination = {false}
                rowKey = "scorename"
                columns = {scoreColumns}
                dataSource = {sampleScore} 
              />
            </TabPane>
            <TabPane tab="角色打分情况" key="2">
              <Table
                pagination = {false}
                rowKey = "rolename"
                columns = {roleScoreColumns}
                dataSource = {roleScore} 
              />
            </TabPane>
          </Tabs>
        </Modal>
      </PageHeaderLayout>
    )
  }
}
export default Form.create()(ApplyDetail)
